(function () {
    let clock = document.getElementById('clock')
    let ctx = clock.getContext('2d')
    let t = null

    class Clock {
        init() {
            this.draw()
            this.t = setInterval(this.draw.bind(this),1000)
        }
        r = 250
        draw() {
            ctx.clearRect(0,0,500,500) //清除画板、清除区域
            this.getTime()//获取时间
            ctx.save()
            this.drawPanel() //表盘
            this.drawHourNums() //绘制数字
            this.drawHours(this.hours) //时针
            this.drawMinute(this.minite) //分针
            this.drawSecond(this.second) //秒针
            this.drawCenter() //中心点
            ctx.restore()
        }

        drawPanel() {
            ctx.beginPath()//重新开启画，ctx不会互相影响
            // 平移画布中心点
            ctx.translate(this.r,this.r)
            ctx.fillStyle = '#fff'

            //参数 圆心X坐标 圆心Y坐标 半径 从0开始 画2pi角度 是否为顺时针
            ctx.arc(0,0,this.r-30,0,2*Math.PI,false)
            ctx.fill()
        }
        drawHourNums(){
            ctx.beginPath()//重新开启画，ctx不会互相影响
            ctx.fillStyle = '#000'
            ctx.font = "40px serif"
            ctx.textAlign = 'center' //水平居中
            ctx.textBaseline = 'middle'//垂直居中
            for (let i = 1;i <= 12;i++){
                let radius = 2*Math.PI/12*i - Math.PI/2//角度
                let x = (this.r - 60) * Math.cos(radius)// 计算x,y坐标
                let y = (this.r - 60) * Math.sin(radius)
                ctx.fillText(i.toString(),x,y)
            }
        }
        drawCenter(){
            ctx.beginPath()//重新开启画，ctx不会互相影响
            ctx.fillStyle = '#333'
            ctx.arc(0,0,10,0,2*Math.PI,false)
            ctx.fill()
        }
        //时针
        drawHours(hours){
            let radius = 2*Math.PI/12 * hours

            ctx.save() //保存当前绘图环境
            ctx.beginPath();
            ctx.lineWidth = 6 //线宽
            ctx.strokeStyle = '#f00'
            ctx.lineCap = 'round' //圆角
            ctx.rotate(radius) //旋转的是画布，先旋转再绘画
            ctx.moveTo(0,0)//起点坐标
            ctx.lineTo(0,-this.r*0.5)//终点坐标
            ctx.stroke()
            ctx.restore()//还原旋转

        }
        //分针
        drawMinute(minutes){

            ctx.save() //保存当前绘图环境
            let radius = 2*Math.PI/60 * minutes
            ctx.beginPath();
            ctx.lineWidth = 4 //线宽
            ctx.strokeStyle = '#0f0'
            ctx.lineCap = 'round' //圆角
            ctx.rotate(radius) //旋转的是画布，先旋转再绘画
            ctx.moveTo(0,0)//起点坐标
            ctx.lineTo(0,-this.r*0.6)//终点坐标
            ctx.stroke()
            ctx.restore()//还原旋转
        }
        //秒针
        drawSecond(seconds){
            let radius = 2*Math.PI/60 * seconds
            ctx.save() //保存当前绘图环境
            ctx.beginPath();
            ctx.lineWidth = 2 //线宽
            ctx.strokeStyle = '#00f'
            ctx.lineCap = 'round' //圆角
            ctx.rotate(radius) //旋转的是画布，先旋转再绘画
            ctx.moveTo(0,0)//起点坐标
            ctx.lineTo(0,-this.r*0.7)//终点坐标
            ctx.stroke()
            ctx.restore()//还原旋转
        }
        getTime(){
                let date = new Date()
                this.hours =  date.getHours()
                this.minite = date.getMinutes()
                this.second = date.getSeconds()
        }
    }

    window.Clock = Clock;
})()